<template>

  <div>
    <div class="div1">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">资源</el-breadcrumb-item>
        <el-breadcrumb-item>资源统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="div3">
      <el-row>
        <el-col :span="12">
          <div>
            <div class="div4">
              <h4>素材等级统计</h4>
              <a href="#">更多维度数据 ></a>
            </div>
            <div id="myChart" :style="{width: '500px',height: '300px'}" ></div>
          </div>

          <div>
            <div class="div6">
              <h4>素材风格</h4>
              <a href="#">更多维度数据 ></a>
            </div>
            <div id="myChart1" :style="{width: '500px',height: '300px'}" ></div>
          </div>
        </el-col>

        <el-col :span="12">

          <div>
            <div class="div5">
              <h4>素材评价统计</h4>
              <a href="#">更多维度数据 ></a>
            </div>
            <div id="myChart2" :style="{width: '500px',height: '300px'}" ></div>
          </div>

          <div>
            <div class="div7">
              <h4>图片类型</h4>
              <a href="#">更多维度数据 ></a>
            </div>
            <div id="myChart3" :style="{width: '500px',height: '300px'}" ></div>
          </div>

        </el-col>
      </el-row>
    </div>

    <div class="table">

        <div class="div8" >
          <h4>素材统计({{page.totalCount}})</h4>
          <div>
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              style="width: 200px"
              @keyup.enter.native="queryAll(1)"
              v-model="input2">
            </el-input>

            <el-select
              v-model="value1"
              style="margin-left: 2px;"
              placeholder="所属公司 全部"
              @change="queryAll(1)">
              <el-option
              v-for="item in sysDept"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>

            <el-select
              v-model="value2"
              collapse-tags
              style="margin-left: 2px;"
              placeholder="用户角色 全部"
              @change="queryAll(1)">
              <el-option
                v-for="item in tRole"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>

            <el-select
              v-model="value3"
              collapse-tags
              style="margin-left: 2px;"
              placeholder="用户视角"
              @change="value3Show">
              <el-option
                v-for="item in options1"
                :key="item.label"
                :label="item.value"
                :value="item.label">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="div9">
          <el-row>
            <el-col :span="24">
              <div v-if="tableShow">
                <el-table
                  :data="tOrderDetail"
                  style="width: 98%;"
                  :default-sort = "{prop: 'concat', order: 'ascending'}"
                >

                  <el-table-column
                    prop="modelId"
                    label="模型ID"
                    width="150">
                  </el-table-column>

                  <el-table-column
                    prop="makeName"
                    label="制作人"
                    width="180">
                  </el-table-column>

                  <el-table-column
                    prop="companyName"
                    label="所属公司"
                    width="180">
                  </el-table-column>

                  <el-table-column
                    prop="sceneName"
                    label="类型"
                    width="180">
                    <template v-slot="scope">
                      {{scope.row.sceneName}}/{{scope.row.gnflName}}
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="commentNum"
                    label="等级标签"
                    width="180">
                    <template slot-scope="scope">
                      <div class="div10">
                        <span v-if="scope.row.commentName === '好评'" class="basses1">{{scope.row.commentName}}</span>
                        <span v-if="scope.row.commentName === '中评'" class="basses2">{{scope.row.commentName}}</span>
                        <span v-if="scope.row.commentName === '差评'" class="basses3">{{scope.row.commentName}}</span>
                        <div style="margin-left: 40px;margin-top: -22px">
                          <span v-if="scope.row.zpshName === '首席'"  class="basses4">{{scope.row.zpshName}}</span>
                          <span v-if="scope.row.zpshName === '高级'"  class="basses5">{{scope.row.zpshName}}</span>
                          <span v-if="scope.row.zpshName === '优秀'"  class="basses6">{{scope.row.zpshName}}</span>
                          <span v-if="scope.row.zpshName === '正式'"  class="basses7">{{scope.row.zpshName}}</span>
                          <span v-if="scope.row.zpshName != '首席' && scope.row.zpshName != '高级' && scope.row.zpshName != '优秀' && scope.row.zpshName != '正式' && scope.row.zpshName != ' ' && scope.row.zpshName != null" class="basses4">{{scope.row.zpshName}}</span>
                        </div>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="pictureActTime"
                    width="180"
                    label="上传时间">
                  </el-table-column>
                </el-table>
              </div>

              <div v-if="tableShow1">
                <el-table
                  :data="tOrderDetail"
                  style="width: 90%;margin-left: 50px"
                  :default-sort = "{prop: 'concat', order: 'ascending'}"
                >
                  <el-table-column
                    prop="makeName"
                    label="制作人"
                    width="270">
                  </el-table-column>

                  <el-table-column
                    prop="companyName"
                    label="所属公司"
                    width="270">
                  </el-table-column>

                  <el-table-column
                    prop="role"
                    label="角色"
                    width="270">
                    <template slot-scope="scope">
                      <div class="div11">
                        <span v-if="scope.row.role === '制作员'" class="basses6">
                          <b>{{scope.row.role}}</b>
                        </span>
                        <span v-if="scope.row.role === '客服'" class="basses7">
                          <b>{{scope.row.role}}</b>
                        </span>
                        <span v-if="scope.row.role === '管理员'" class="basses5">
                          <b>{{scope.row.role}}</b>
                        </span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="grade"
                    label="等级"
                    width="270">
                    <template slot-scope="scope">
                      <div class="div11">
                        <span v-if="scope.row.grade === '铂金'" class="basses11">
                          <b>{{scope.row.grade}}</b>
                        </span>
                        <span v-if="scope.row.grade === '王者'" class="basses6">
                          <b>{{scope.row.grade}}</b>
                        </span>
                        <span v-if="scope.row.grade === '--'" >
                          <b>{{scope.row.grade}}</b>
                        </span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

            </el-col>
          </el-row>
        </div>

        <div class="div11" style="margin-left: 300px">
          <el-pagination
            :page-size="20"
            @current-change="queryAll"
            :current-page.sync="page.currPageNo"
            layout="total,prev, pager, next, jumper"
            :total="page.totalCount">
          </el-pagination>
        </div>
    </div>

  </div>


</template>

<script>

import { queryAllBySysDept,queryzpshType,querySumDetail,querycommentType,querysumComment,queryproductType,queryall,queryRole,querySumOrder} from '@/api/resource'


export default {
  name: 'resourceStatistics',
  data() {
    return {
      options1:[
        {label: '1',value: '用户视角'},
        {label: '2',value: '全局视角'}],
      input2: '',
      value1: '',
      value2: '',
      value3: '',
      tableShow: true,
      tableShow1: false,
     //素材评级统计
      series1:[],
      // 所有分公司对象
      sysDept: [],
      // 所有公司名称
      sysDeptName: [],
      // 所有评级
      zpshType: [],
      // 所有评价
      commentType: [],
      // show2 所有
      dimensions: [],
      source: [],
      series: [],
      // 圆环图的标题
      title:[],
      // 风格
      productType:[],
      // 素材风格 圆环图
      option:{
        tooltip : {
          show: true,
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        title: [],
        legend: {
          left: 'left',
          itemWidth: 10,
          itemHeight: 10,
          padding: [30, 20, 20, 10],
          icon: 'circle',
          data: []
        },
        toolbox: {
          show : false
        },
        calculable:false,
        series : [
          {
            name:'长沙红星',
            type:'pie',
            center: ['10%', '48%'],
            radius : [20,35],
            data:[
              {value:214, name:'中古风'},
              {value:300, name:'意式'},
              {value:400, name:'侘寂'},
              {value:250, name:'民宿'},
              {value:250, name:'现代'},
              {value:250, name:'轻奢'},
              {value:250, name:'港式'},
              {value:250, name:'新中式'},
              {value:250, name:'北欧'},
              {value:250, name:'泰式'},
              {value:250, name:'简欧'},
              {value:250, name:'欧式'},
              {value:250, name:'美式'},
              {value:214, name:'简美'},
              {value:300, name:'地中海'},
              {value:400, name:'法式'},
              {value:250, name:'工业风'},
              {value:250, name:'田园'},
              {value:250, name:'日式'},
              {value:250, name:'极简'},
              {value:250, name:'中式'},
              {value:250, name:'混搭'},
              {value:250, name:'东南亚'}
            ],
            itemStyle: {//系列级个性化
              normal: {
                labelLine:{//饼图不显示线条
                  show:false
                },
                label:{//饼图不显示文字
                  show:false
                },
              }
            }
          },
          {
            name:'邵阳图夫',
            type:'pie',
            center: ['27%', '48%'],
            radius : [20,35],
            data:[
              {value:214, name:'中古风'},
              {value:300, name:'意式'},
              {value:400, name:'侘寂'},
              {value:250, name:'民宿'},
              {value:250, name:'现代'},
              {value:250, name:'轻奢'},
              {value:250, name:'港式'},
              {value:250, name:'新中式'},
              {value:250, name:'北欧'},
              {value:250, name:'泰式'},
              {value:250, name:'简欧'},
              {value:250, name:'欧式'},
              {value:250, name:'美式'},
              {value:214, name:'简美'},
              {value:300, name:'地中海'},
              {value:400, name:'法式'},
              {value:250, name:'工业风'},
              {value:250, name:'田园'},
              {value:250, name:'日式'},
              {value:250, name:'极简'},
              {value:250, name:'中式'},
              {value:250, name:'混搭'},
              {value:250, name:'东南亚'}
            ],
            itemStyle: {
              normal: {
                labelLine:{
                  show:false
                },
                label:{
                  show:false
                }
              }
            }
          },
          {
            name:'长沙东塘',
            type:'pie',
            center: ['44%', '48%'],
            radius : [20,35],
            data:[
              {value:214, name:'中古风'},
              {value:300, name:'意式'},
              {value:400, name:'侘寂'},
              {value:250, name:'民宿'},
              {value:250, name:'现代'},
              {value:250, name:'轻奢'},
              {value:250, name:'港式'},
              {value:250, name:'新中式'},
              {value:250, name:'北欧'},
              {value:250, name:'泰式'},
              {value:250, name:'简欧'},
              {value:250, name:'欧式'},
              {value:250, name:'美式'},
              {value:214, name:'简美'},
              {value:300, name:'地中海'},
              {value:400, name:'法式'},
              {value:250, name:'工业风'},
              {value:250, name:'田园'},
              {value:250, name:'日式'},
              {value:250, name:'极简'},
              {value:250, name:'中式'},
              {value:250, name:'混搭'},
              {value:250, name:'东南亚'}
            ],
            itemStyle: {//系列级个性化
              normal: {
                labelLine:{//饼图不显示线条
                  show:false
                },
                label:{//饼图不显示文字
                  show:false,
                }
              }
            }
          },
          {
            name:'邵阳柏林',
            type:'pie',
            center: ['61%', '48%'],
            radius : [20,35],
            data:[
              {value:214, name:'中古风'},
              {value:300, name:'意式'},
              {value:400, name:'侘寂'},
              {value:250, name:'民宿'},
              {value:250, name:'现代'},
              {value:250, name:'轻奢'},
              {value:250, name:'港式'},
              {value:250, name:'新中式'},
              {value:250, name:'北欧'},
              {value:250, name:'泰式'},
              {value:250, name:'简欧'},
              {value:250, name:'欧式'},
              {value:250, name:'美式'},
              {value:214, name:'简美'},
              {value:300, name:'地中海'},
              {value:400, name:'法式'},
              {value:250, name:'工业风'},
              {value:250, name:'田园'},
              {value:250, name:'日式'},
              {value:250, name:'极简'},
              {value:250, name:'中式'},
              {value:250, name:'混搭'},
              {value:250, name:'东南亚'}
            ],
            itemStyle: {//系列级个性化
              normal: {
                labelLine:{//饼图不显示线条
                  show:false
                },
                label:{//饼图不显示文字
                  show:false
                }
              }
            }
          }
        ]
      },
      // 柱状图素材评价的的option
      zhuOption:{
        // 标题
        legend: {
          left: 'left',
          itemWidth: 10,
          itemHeight: 10,
          padding: [20, 20, 20, 50],
          icon: 'circle',
          data: []
        },
        // 弹窗
        tooltip: {
          trigger: 'axis',
          backgroundColor:'rgb(255,255,255)',
          textStyle: {
            color: 'R=175  G=178  B=186',     // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: 'bolder',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '14',    // 文字字体大小
            lineHeight: '20',    // 行高
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        // 显示数据
        dataset: {
          dimensions: [],
          source: []
        },
        // X轴
        xAxis: {
          type: 'category',
          axisLabel: {
            show: true,
            interval: 0
          }
        },
        yAxis: {},
        // 数据
        series: []
      },
      // 下方列表
      tOrderDetail: [],
      order : {
        taskName :'',
        companyId : '',
        makeId : '',
        index : '1'
      },
      page: {},
      // 所有角色
      tRole: [],
      yuanSeries:[],
    }
  },
  methods: {
    // 1  以高级 首席等为主
    /**
     * 素材等级统计
     * */
    show() {
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      let option = {
        // color: [],
        // 标题
        legend: {
          left: 'left',
          padding: [20, 0, 20, 50],
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          data: this.zpshType
        },
        // 弹窗
        tooltip: {
          trigger: 'axis',
          backgroundColor:'rgb(255,255,255)',
          textStyle: {
            color: 'R=175  G=178  B=186',     // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: 'bolder',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '14',    // 文字字体大小
            lineHeight: '20',    // 行高
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              interval: 0,
            },
            nameLocation: 'center',
            data: this.sysDeptName
          }
        ],
        yAxis: [{type:'value'}],
        series: this.series1
      }
      myChart.setOption(option)
    },

    // 2   以公司为主
    /**
     * 素材评价统计
     * */
    show2() {
      let myChart = this.$echarts.init(document.getElementById('myChart2'));

      this.zhuOption.legend.data = this.commentType
      this.zhuOption.dataset.dimensions = this.dimensions
      this.zhuOption.dataset.source = this.source

      console.log(1111111111)
      console.log(this.source)
      this.zhuOption.series = this.series

      myChart.setOption(this.zhuOption);
    },

    // 3
    /**
     * 素材风格
     * */
    show3(){
      let myChart = this.$echarts.init(document.getElementById('myChart1'));
      this.option.title = this.title
      this.option.legend.data = this.productType
      this.option.series = this.yuanSeries

      myChart.setOption(this.option);
    },

    //4
    /**
     * 图片类型
     * */
    show4(){
      let myChart = this.$echarts.init(document.getElementById('myChart3'));
      this.option.title = this.title
      this.option.legend.data = this.productType
      this.option.series = this.yuanSeries

      myChart.setOption(this.option);
    },

    /**
     * 查询所有公司
     * */
    querySysDeptByParentId(){
      queryAllBySysDept().then( res =>{
        this.sysDept = res;
        let bai = 9
        for (let re of res) {
          this.sysDeptName.push(re.name)
          let titleTest = {
            subtext: re.name,
            left: bai+'%',
            top: '60%',
            textAlign: 'center'
          }
          bai += 17
          this.title.push(titleTest)
        }
        this.show4()
      })
    },
    /**
     * 查询所有角色
     * */
    queryAllRole(){
      queryRole().then(res=>{
        this.tRole = res
      })
    },
    /**
     * 查询所有审核级别
     * */
    queryZpshType(){
      queryzpshType().then( res =>{
        for (let re of res) {
          this.zpshType.push(re.label)
        }
      })
    },
    /**
     * 素材等级统计
     * */
    querysumDetail(){
      querySumDetail().then( res =>{
        for (let i = 0; i < this.zpshType.length; i++) {
          let ser = {
            name : this.zpshType[i],
            type: 'bar',
            emphasis:{
              focus:'series'
            },
            data: res[i]
          }
          this.series1.push(ser)
        }
        this.show()
      })
    },
    /**
     * 查询所有客户评价
     * */
    queryCommentType(){
      querycommentType().then(res =>{
        this.dimensions.push('product')
        for (let re of res) {
          let type ={
            type:'bar'
          }
          this.commentType.push(re.label)
          this.dimensions.push(re.label)
          this.series.push(type)
        }
      })
    },
    /**
     * 素材评价统计
     * */
    querySumComment(){
      querysumComment().then(res =>{
        for (let re of res) {
          this.source.push(re)
        }
        let json = eval('[' + this.source + ']');
        this.source = json
        this.show2();
      })
    },
    /**
     * 查询所有风格
     * */
    queryProductType(){
      queryproductType().then(res =>{
        for (let re of res) {
          this.productType.push(re.label)
        }
      })
    },
    /**
     * 素材风格
     * */
    querysumOrder(){
      querySumOrder().then(res=>{
        let center = 10
        for (let re of res) {
          let se = {
            name: re.name,
            type:'pie',
            center: [ center+'%', '48%'],
            radius : [20,35],
            data: re.list,
            itemStyle: {//系列级个性化
              normal: {
                labelLine:{//饼图不显示线条
                  show:false
                },
                label:{//饼图不显示文字
                  show:false
                },
              }
            }
          }
          center += 17
          this.yuanSeries.push(se)
        }
        this.show3()
        this.show4()
      })
    },
    /**
     * 图片类型
     * */

    /**
     * 列表
     * */
    queryAll(index){
      this.order.taskName = this.input2
      this.order.companyId = this.value1
      this.order.makeId = this.value2
      this.order.index = index
      queryall(this.order).then(res =>{
        console.log(1111)
        console.log(res)
        this.page = res
        this.tOrderDetail = res.goodsList
      })
    },
    /**
     * 视角转换
     * */
    value3Show(){
      if(this.value3 == 1){
        this.tableShow1 = true
        this.tableShow = false
      }
      if(this.value3 == 2){
         window.location.reload()
      }
    },
  },
  mounted() {
    this.querySysDeptByParentId();
    this.queryZpshType();
    this.querysumDetail();
    this.queryCommentType();
    this.querySumComment();
    this.queryProductType();
    this.queryAllRole();
    this.queryAll(1);
    this.querysumOrder();
  }
}
</script>

<style scoped>

body{
  background-color: #FFFFFF;
}

.div1{
  margin-top: 35px;
  margin-left:30px;
}
.div2{
  margin-top: -30px;
  margin-left: 980px;
}

.div3{
  height: 600px;
  margin-top: 80px;
  margin-left: 60px;
}

.div4 h4{
  font-size: 15px;
}
.div4 a{
  margin-left: 360px;
  color: blue;
}

.div5 h4{
  font-size: 15px;
}
.div5 a{
  margin-left: 360px;
  color: blue;
}

.div6{
  margin-top: 20px;
}
.div6 h4{
  font-size: 15px;
}
.div6 a{
  margin-left: 360px;
  color: blue;
}

.div7{
  margin-top: 20px;
}
.div7 h4{
  font-size: 15px;
}
.div7 a{
  margin-left: 360px;
  color: blue;
}

.div8 h4{
  font-size: 15px;
  margin-top: -100px;
  margin-left: 20px;
}

.div8 div{
  margin-top: -20px;
  margin-left: 180px;
}
.div8{

}

.table{
  height: 500px;
}

.div9{
  margin-left: 20px;
  margin-top: 30px;
  /*width: 1290px;*/

}

.div10{
  width: 100px;
  height: 23px;
  line-height: initial;
}

.div10 span{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 35px;
  height: 22px;
  font-size: 10px;
  border-radius: 4px;
}

.basses1{
  background-color: #1EC585;
  color: #EAF9F4;
}

.basses2{
  background-color: #2B6AFF;
  color: #EAF9F4;
}

.basses3{
  background-color: #EF5655;
  color: #EAF9F4;
}

.basses4{
  background-color: #d5b4ea;
  color: #9a41da;
}

.basses5{
  background-color: #FFF8E6;
  color: #DCBD71;
}

.basses6{
  background-color: #E5EEFE;
  color: #729DFF;
}

.basses7{
  background-color: #ECFFEB;
  color: #1EC585;
}

.div11{
  width: 100px;
  height: 23px;
  line-height: initial;
}

.div11 span{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border-radius: 4px;
  width: 50px;
  height: 23px;
  font-size: 11px;
}

.basses11{
  background-color: #F0F0F2;
  color: #B0B2BA;
}



.acc{

  /*background: #FFFFFF;*/
  border: #FFFFFF ;
}

.acc:hover{
  background: #FFFFFF;
}

.acc input{
  width: 5px;
}


</style>
